<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:s="http://jboss.com/products/seam/taglib"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets">
<head>
<title>Web Document</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"></meta>
<meta http-equiv="imagetoolbar" content="false"></meta>
<meta name="description" content=""></meta>
<meta name="keywords" content=""></meta>
<link href="galleria/galleria.css" rel="stylesheet" type="text/css"
	media="screen"></link>


<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="galleria/jquery.galleria.js"></script>
<script src="context/jquery.contextMenu.js" type="text/javascript"></script>
<link href="context/jquery.contextMenu.css" rel="stylesheet"
	type="text/css" media="screen"></link>
<script type="text/javascript">
	//          
	jQuery(function($) {

		var pageNumber = 0;

		$('.gallery_demo_unstyled').addClass('gallery_demo'); // adds new class name to maintain degradability
		$('.nav').css('display', 'none'); // hides the nav initially

		$('ul.gallery_demo').galleria({
			history : false, // deactivates the history object for bookmarking, back-button etc.
			clickNext : false, // helper for making the image clickable. Let's not have that in this example.
			insert : '#main_image', // the containing selector for our main image. 
			// If not found or undefined (like here), galleria will create a container 
			// before the ul with the class .galleria_container (see CSS)
			onImage : function(image) {
                image.hide();
                image.parent().hide();
                $('.nav').css('display', 'block');
                pageNumber = parseInt(($(".caption").text()));

                var img_src = image.attr('src');
                img_src = img_src.replace("empty=1", "empty=0");                        
                image.removeAttr('src');
                image.removeAttr('width');
                image.removeAttr('height');
                var timestamp = new Date().getTime();
                image.attr('src', img_src + '&amp;' + timestamp);

                image.parent().show();
                image.show();

				//pageNumber = parseInt($(image).attr('title'));
				//alert(image.getAttribute('title'));  
			} // shows the nav when the image is showing
		});

		// Show menu when #myDiv is clicked
		$("#main_image")
				.contextMenu(
						{
							menu : 'myMenu'
						},
						function(action, el, pos) {
							if(action == "currentdateLong")
							{
								$.post(
										"#{facesContext.externalContext.requestContextPath}/action/currentdateLong",

										{
											"document" : "${documentBean.document.uuid}",
											"page" : pageNumber,
											"x" : parseInt($("#main_image")
													.width()
													+ pos.x),
											"y" : parseInt($("#main_image")
													.height()
													- pos.y)
										},

										function() {
											var image = $($(
													el.children()[0])
													.children()[0]);

											image.hide();

											var img_src = image.attr('src');
											img_src = img_src.replace(
													"empty&amp;=1",
													"empty&amp;=0");
											image.attr('src', '');
											var timestamp = new Date()
													.getTime();
											image.attr('src', img_src
													+ '&amp;' + timestamp);
											image.show();
										});//end post	
							}else if(action == "currentdateDay")
							{
								$.post(
										"#{facesContext.externalContext.requestContextPath}/action/currentdateDay",

										{
											"document" : "${documentBean.document.uuid}",
											"page" : pageNumber,
											"x" : parseInt($("#main_image")
													.width()
													+ pos.x),
											"y" : parseInt($("#main_image")
													.height()
													- pos.y)
										},

										function() {
											var image = $($(
													el.children()[0])
													.children()[0]);

											image.hide();

											var img_src = image.attr('src');
											img_src = img_src.replace(
													"empty&amp;=1",
													"empty&amp;=0");
											image.attr('src', '');
											var timestamp = new Date()
													.getTime();
											image.attr('src', img_src
													+ '&amp;' + timestamp);
											image.show();
										});//end post	
							}else if(action == "currentdateMonthYear")
							{
								$.post(
										"#{facesContext.externalContext.requestContextPath}/action/currentdateMonthYear",

										{
											"document" : "${documentBean.document.uuid}",
											"page" : pageNumber,
											"x" : parseInt($("#main_image")
													.width()
													+ pos.x),
											"y" : parseInt($("#main_image")
													.height()
													- pos.y)
										},

										function() {
											var image = $($(
													el.children()[0])
													.children()[0]);

											image.hide();

											var img_src = image.attr('src');
											img_src = img_src.replace(
													"empty&amp;=1",
													"empty&amp;=0");
											image.attr('src', '');
											var timestamp = new Date()
													.getTime();
											image.attr('src', img_src
													+ '&amp;' + timestamp);
											image.show();
										});//end post	
							}
							else if(action == "undo")
							{
								$.post(
										"#{facesContext.externalContext.requestContextPath}/action/undodocument",
										{
											"document":"${documentBean.document.uuid}"
										},
										function() {
											var image = $($(
													el.children()[0])
													.children()[0]);

											image.hide();

											var img_src = image.attr('src');
											img_src = img_src.replace(
													"empty&amp;=1",
													"empty&amp;=0");
											image.attr('src', '');
											var timestamp = new Date()
													.getTime();
											image.attr('src', img_src
													+ '&amp;' + timestamp);
											image.show();
										});//endpost
							}else if (action == "sign"){
							
								$.post(
											"#{facesContext.externalContext.requestContextPath}/action/signdocument",

											{
												"document" : "${documentBean.document.uuid}",
												"page" : pageNumber,
												"x" : parseInt($("#main_image")
														.width()
														+ pos.x),
												"y" : parseInt($("#main_image")
														.height()
														- pos.y)
											},

											function() {
												var image = $($(
														el.children()[0])
														.children()[0]);

												image.hide();

												var img_src = image.attr('src');
												img_src = img_src.replace(
														"empty&amp;=1",
														"empty&amp;=0");
												image.attr('src', '');
												var timestamp = new Date()
														.getTime();
												image.attr('src', img_src
														+ '&amp;' + timestamp);
												image.show();
											});//end post	
							}//endif
						});//endfunction

	});
	//
</script>
<style media="screen,projection" type="text/css">

/* BEGIN DEMO STYLE */
* {
	margin: 0;
	padding: 0
}

body {
	padding: 20px;
	width: 900px;
	background: white;
	background: white;
	color: #555;
	font: 80%/140% 'helvetica neue', sans-serif;
	margin: 0 auto;
}

h1,h2 {
	font: bold 80% 'helvetica neue', sans-serif;
	letter-spacing: 3px;
	text-transform: uppercase;
}

a {
	color: #348;
	text-decoration: none;
	outline: none;
}

a:hover {
	color: #67a;
}

.caption {
	color: #888;
	position: absolute;
	top: 250px;
	left: 3px;
	width: 200px;
	display: none;
}

.gallery_demo {
	float: left;
}

.gallery_demo li {
	width: 55px;
	height: 70px;
	border: 3px double #eee;
	margin: 0 2px 2px 0;
	background: #eee;
}

.gallery_demo li.hover {
	border-color: #bbb;
}

.gallery_demo li.active {
	border-style: solid;
	border-color: #222;
}

.gallery_demo li div {
	left: 240px
}

.gallery_demo li div .caption {
	font: italic 0.7em/1.4 georgia, serif;
}

.galleria_container {
	margin: 0 auto 60px auto;
	height: auto;
	float: right;
}

.nav {
	padding-top: 15px;
	clear: both;
}

.info {
	text-align: left;
	margin: 30px 0;
	border-top: 1px dotted #221;
	padding-top: 30px;
	clear: both;
}

.info p {
	margin-top: 1.6em;
}

.nav {
	position: absolute;
	top: 410px;
	left: 0;
}

#main_image {
	border:1px solid black;
	width: auto;
    height: auto;
	
}

ul {
	list-style: none;
}
</style>

</head>
<body>


	<h1 style="display: inline;">Web Document</h1>
	<p>Click on a page to begin.</p>
	<p>Access available actions with right-click mouse button.</p>
	<form method="POST" action="#{facesContext.externalContext.requestContextPath}/action/finish?document=${documentBean.document.uuid}">
		<input type="submit" value="Finish"/> 		
	</form>

	<div style="float: right">

		<div class="demo">
			<ul class="gallery_demo_unstyled">
			<ui:repeat value="${documentBean.pages}" var="page">
				<li title="${page.number}">
					<a href="#{facesContext.externalContext.requestContextPath}/action/pdftoimage?id=${documentBean.document.uuid}&amp;page=${page.number}&amp;empty=1"
						alt="${page.number}" title="${page.number}"><img alt="${page.number}" src="stock_new-text.png"/></a></li>
						
			</ui:repeat>
			</ul>
		</div>
	</div>


	<div style="float: left"></div>


	<div id="main_image" style=""></div>
	<div id="main_image2" style=""></div>

	<ul style="width:400px" id="myMenu" class="contextMenu">
		<li class="sign"><a href="#sign">Sign Here</a></li>
		<li class="currentdateLong"><a href="#currentdateLong">Add "This the .... day of ....,20.." for current date.</a>
		</li>
		<li class="currentdateDay"><a href="#currentdateDay">Add Day</a>
		</li>
		<li class="currentdateMonthYear"><a href="#currentdateMonthYear">Add Month, Year</a>
		</li>
		<li class="undo separator"><a href="#undo">Undo</a>
		</li>
		<li class="finish separator"><a href="#finish">Finish</a>
		</li>
	</ul>
</body>
</html>